import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:life_milestones/controller/MS-global-user-controller.dart';
import 'package:life_milestones/controller/MS-home-controller.dart';
import 'package:life_milestones/features/MS-main-page.dart';
import 'package:stroke_text/stroke_text.dart';
import 'package:provider/provider.dart';
import '../../MS-global-url.dart';
import '../../MS-request.dart';
import '../../component/MS-select-time-view.dart';
import '../../util/MS-toast-util.dart';

class MSEditGroupPage extends StatefulWidget {
  const MSEditGroupPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MSEditGroupPageState();
  }
}

class _MSEditGroupPageState extends State<MSEditGroupPage> {
  TextEditingController textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
   return Consumer<MSHomeController>(builder: (BuildContext context,MSHomeController controller,Widget? c){
     return Scaffold(
       resizeToAvoidBottomInset: false,
       body: Column(
         children: [
           Container(
             color: const Color(0xFF148857),
             padding: EdgeInsets.only(top: ScreenUtil().statusBarHeight),
             height: ScreenUtil().statusBarHeight + 90.w,
             width: double.infinity,
             child: DecoratedBox(
               decoration: const BoxDecoration(
                   image: DecorationImage(
                       image: AssetImage("images/home-edit-header-bg.png"))),
               child: Padding(
                 padding: EdgeInsets.symmetric(horizontal: 24.w),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                     InkWell(
                       onTap: (){
                         Navigator.of(context).pop();
                       },
                       child: Container(
                         width: 152.w,
                         height: 50.w,
                         decoration: const BoxDecoration(
                             image: DecorationImage(
                                 image: AssetImage(
                                     "images/home-header-button-bg.png"))),
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
                             Padding(
                               padding: EdgeInsets.only(right: 11.w),
                               child: Image.asset(
                                 "images/home-list-icon.png",
                                 width: 25.w,
                                 fit: BoxFit.fitWidth,
                               ),
                             ),
                             Image.asset(
                               "images/home-list-label.png",
                               width: 43.w,
                               fit: BoxFit.fitWidth,
                             )
                           ],
                         ),
                       ),
                     ),
                     InkWell(
                       onTap: (){
                         Navigator.of(context).pop();
                       },
                       child: Container(
                         width: 152.w,
                         height: 50.w,
                         decoration: const BoxDecoration(
                             image: DecorationImage(
                                 image: AssetImage(
                                     "images/home-header-button-bg.png"))),
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
                             Padding(
                               padding: EdgeInsets.only(right: 11.w),
                               child: Image.asset(
                                 "images/home-close.png",
                                 width: 25.w,
                                 fit: BoxFit.fitWidth,
                               ),
                             ),
                             StrokeText(
                               text: "Close",
                               strokeColor: Color(0xFF065F39),
                               strokeWidth: 3.w,
                               textColor: Colors.white,
                               textStyle: TextStyle(
                                   fontSize: 16.sp, fontWeight: FontWeight.bold),
                             )
                           ],
                         ),
                       ),
                     ),
                   ],
                 ),
               ),
             ),
           ),
           Expanded(
               child: Stack(
                 children: [
                   Positioned.fill(
                       child: CustomScrollView(
                         slivers: [
                           SliverToBoxAdapter(
                             child: Container(
                               width: double.infinity,
                               padding:
                               EdgeInsets.only(left: 24.w, right: 24.w, top: 30.w),
                               child: Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
                                   StrokeText(
                                     text: "Lists Name",
                                     strokeColor: Color(0xFF065F39),
                                     strokeWidth: 3.w,
                                     textColor: Colors.white,
                                     textStyle: TextStyle(
                                         fontSize: 16.sp, fontWeight: FontWeight.bold),
                                   ),
                                   Padding(
                                       padding: EdgeInsets.only(top: 10.w),
                                       child: Container(
                                         padding: EdgeInsets.symmetric(horizontal: 10.w),
                                         decoration: BoxDecoration(
                                             color: Color(0x33148857),
                                             borderRadius: BorderRadius.all(
                                                 Radius.circular(13.5.w))),
                                         child: TextField(
                                           controller: textController,
                                           decoration:
                                           const InputDecoration(border: InputBorder.none),
                                         ),
                                       )),
                                   Padding(
                                     padding: EdgeInsets.only(top: 10.w),
                                     child: Row(
                                       mainAxisAlignment: MainAxisAlignment.center,
                                       children: [
                                         Padding(
                                           padding: EdgeInsets.only(right: 20.w),
                                           child: InkWell(
                                             onTap: (){
                                               if(textController.text.isNotEmpty){
                                                 if(controller.categories.length < 5){
                                                   controller.addCategory(textController.text);
                                                   textController.text = "";
                                                 }else if((MSGlobalUserController().user!.availableCoins ?? 0) < 9){
                                                   Navigator.of(context,rootNavigator:true).pushNamed("/store");
                                                 }else{
                                                   showModalBottomSheet(context: MSMainPage.of(context)!.context, builder: (BuildContext context){
                                                     return const MSChargeDialog();
                                                   },backgroundColor: Colors.transparent,isScrollControlled: true ).then((value){
                                                     if(value == 1){
                                                       controller.addCategory(textController.text);
                                                       MSGlobalUserController().refreshUserInfo();
                                                       textController.text = "";
                                                     }
                                                   },);
                                                 }

                                               }
                                             },
                                             child: Container(
                                                 width: 127.w,
                                                 height: 35.w,
                                                 decoration: const BoxDecoration(
                                                     image: DecorationImage(
                                                         image: AssetImage(
                                                             "images/home-save-button-bg.png"))),
                                                 alignment: Alignment.center,
                                                 child: StrokeText(
                                                   text: "Save and Add",
                                                   strokeColor: Color(0xFF065F39),
                                                   strokeWidth: 1.w,
                                                   textColor: Colors.white,
                                                   textStyle: TextStyle(
                                                       fontSize: 12.sp,
                                                       fontWeight: FontWeight.bold),
                                                 )),
                                           ),
                                         ),
                                         InkWell(
                                           onTap: (){
                                             if(textController.text.isNotEmpty){
                                               if(controller.categories.length < 5){
                                                 controller.addCategory(textController.text);
                                                 textController.text = "";
                                                 Navigator.of(context).pop();
                                               }else{
                                                 showModalBottomSheet(context: MSMainPage.of(context)!.context, builder: (BuildContext context){
                                                   return const MSChargeDialog();
                                                 },backgroundColor: Colors.transparent,isScrollControlled: true ).then((value){
                                                   if(value == 1){
                                                     controller.addCategory(textController.text);
                                                     MSGlobalUserController().refreshUserInfo();
                                                     textController.text = "";
                                                     Navigator.of(context).pop();
                                                   }
                                                 },);
                                               }

                                             }
                                           },
                                           child: Container(
                                               width: 127.w,
                                               height: 35.w,
                                               decoration: const BoxDecoration(
                                                   image: DecorationImage(
                                                       image: AssetImage(
                                                           "images/home-save-button-bg.png"))),
                                               alignment: Alignment.center,
                                               child: StrokeText(
                                                 text: "Save",
                                                 strokeColor: Color(0xFF065F39),
                                                 strokeWidth: 1.w,
                                                 textColor: Colors.white,
                                                 textStyle: TextStyle(
                                                     fontSize: 12.sp,
                                                     fontWeight: FontWeight.bold),
                                               )),
                                         )
                                       ],
                                     ),
                                   )
                                 ],
                               ),
                             ),
                           ),
                           SliverPadding(
                             padding:
                             EdgeInsets.only(top: 50.w, left: 24.w, right: 24.w),
                             sliver: SliverList(
                               delegate: SliverChildBuilderDelegate(
                                       (BuildContext context, int index) {
                                         var category = controller.categories[index];
                                     return Padding(
                                       padding: EdgeInsets.only(bottom: 10.w),
                                       child: Container(
                                         height: 68.w,
                                         width: 328.w,
                                         padding: EdgeInsets.only(left: 58.w, right: 20.w),
                                         decoration: const BoxDecoration(
                                             image: DecorationImage(
                                                 image: AssetImage(
                                                     "images/home-list-item-bg.png"))),
                                         child: Row(
                                           children: [
                                             Expanded(
                                               child: Column(
                                                 mainAxisAlignment: MainAxisAlignment.center,
                                                 crossAxisAlignment:
                                                 CrossAxisAlignment.start,
                                                 children: [
                                                   Text(
                                                     category.name,
                                                     style: TextStyle(
                                                         fontSize: 18.sp,
                                                         color: Color(0xFF7A3F17),
                                                         fontWeight: FontWeight.bold),
                                                   ),
                                                   InkWell(
                                                     onTap: () {
                                                       if (MSMainPage.of(context) != null) {
                                                         showModalBottomSheet(
                                                             context: MSMainPage.of(context)!
                                                                 .context,
                                                             builder:
                                                                 (BuildContext context) {
                                                               return MSSelectTimeView(
                                                                 onSelected:
                                                                     (String? value) {
                                                                   if(value!= null){
                                                                     category.time = value;
                                                                     controller.updateCategory(category);
                                                                   }
                                                                 },
                                                               );
                                                             });
                                                       }
                                                     },
                                                     child: DecoratedBox(
                                                       decoration: BoxDecoration(
                                                           color: Color(0xFFBB815A),
                                                           borderRadius:
                                                           BorderRadius.circular(8.w)),
                                                       child: Padding(
                                                         padding: EdgeInsets.symmetric(
                                                             horizontal: 8.w),
                                                         child: Text(
                                                           category.time == "0" ? "add time" : category.time,
                                                           style: TextStyle(
                                                               fontSize: 12.sp,
                                                               fontWeight: FontWeight.w500,
                                                               height: 1.5,
                                                               color: Colors.white),
                                                         ),
                                                       ),
                                                     ),
                                                   )
                                                 ],
                                               ),
                                             ),
                                             Padding(
                                               padding: EdgeInsets.only(left: 10.w),
                                               child: InkWell(
                                                 onTap: (){
                                                   controller.deleteCategory(category);
                                                 },
                                                 child: Image.asset(
                                                   "images/home-delete.png",
                                                   width: 35.w,
                                                   fit: BoxFit.fitWidth,
                                                 ),
                                               ),
                                             )
                                           ],
                                         ),
                                       ),
                                     );
                                   }, childCount: controller.categories.length),
                             ),
                           ),
                           SliverToBoxAdapter(
                             child: Container(
                               height: 175.w,
                               width: double.infinity,
                             ),
                           )
                         ],
                       )),
                   Positioned(
                       right: -46.w,
                       bottom: -35.w,
                       child: Image.asset(
                         "images/home-people.png",
                         width: 288.w,
                         fit: BoxFit.fitWidth,
                       ))
                 ],
               )),
         ],
       ),
     );;
   });
  }
}


class MSChargeDialog extends StatelessWidget{
  const MSChargeDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(child: InkWell(
      onTap: (){
        Navigator.of(context).pop();
      },
      child:Stack(
        children: [Align(alignment: Alignment.center,child: SizedBox(height: 200.w,width: 312.w,
          child: Stack(
            children: [
              Image.asset("images/charge-bg.png",width: 312.w,height: 192.w,fit: BoxFit.cover,),
              Align(alignment: Alignment.bottomCenter,child:  InkWell(
                onTap: (){
                  showLoading();
                  MSRequest().post(MSGlobalUrl.cost,data: {"outlay": 9, "source": "iap"}).then((response){
                    hideLoading();
                    if (response != null &&
                        response["code"] == 0){
                      Navigator.of(context).pop(1);
                    }else{
                      showToast(response["msg"]);
                      Navigator.of(context).pop(0);
                    }
                  }).catchError((){
                    hideLoading();
                  });
                },
                child: Image.asset("images/charge-confirm.png",width: 122.w,fit: BoxFit.fitWidth,),
              ),)
            ],
          ),),)],
      ),
    ),);
  }

}